<script setup>
import { onBeforeMount, ref } from 'vue';
import HelloWorld from './components/HelloWorld.vue'

// let msg = ref('')
// let ws = null
// let reciveMsg = ref('')
// const sendMsg = () => {
//   ws.send(msg.value)
// }


// onBeforeMount(() => {
//     //创建websocket连接
//     const websockerUrl = "ws://127.0.0.1:8080/api/tools/ping"
//     ws = new WebSocket(websockerUrl);
//     ws.onopen = function () {console.log("连接建立时的事件")}
    
//     ws.onmessage = function(msgContent) {
//       console.log("收到消息: ", msgContent.data);
//       reciveMsg.value = msgContent.data
//     }
//     ws.onerror = function() {
//       console.error("连接出现错误");
//     };
    
//     ws.close = function() {
//       console.log("WebSocket connection closed");
//       ws.close();
//     };
//   });
</script>

<template>
  <!-- <el-input v-model="msg" placeholder=""></el-input>
  <el-button type="primary" @click="sendMsg()">发送</el-button>
  接受到的消息: <span>{{ reciveMsg }}</span> -->
  <div>
    <!-- <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a> -->
    <router-view></router-view>
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
</template>

<style lang="less">
.el-form-item.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}
#app{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.auto-space-between{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.auto-layout{
  display: flex;
  flex-direction: row;
  // 自动换行
  flex-wrap: wrap;
  align-items: center;
  div {
    margin: 10px auto;
  }
}
</style>
